<template>
  <el-dialog
    v-model="dialogVisible"
    title="仓库选择器"
    width="90%"
    style="min-width: 800px; max-width: 500px"
    draggable
  >
    <div class="box">
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input
                size="large"
                :placeholder="'名称'"
                v-model="requestParam.data.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- 查询 -->
          <el-col :span="6">
            <el-form-item>
              <el-button
                size="large"
                type="primary"
                @click.prevent="getBodyData()"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="box">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>仓库管理</span>
            <el-button
              style="float: right"
              size="mini"
              type="primary"
              @click.prevent="toSelectSelection()"
              >确认选择</el-button
            >
          </div>
        </template>
        <el-table
          ref="table"
          @selection-change="selectionChange"
          :reserve-selection="true"
          v-loading="loading"
          element-loading-text="Loading..."
          :data="bodyData.content"
          style="width: 100%"
          row-key="id"
          max-height="500px"
        >
          <el-table-column type="selection" width="55" />

          <!-- 序号 -->
          <el-table-column type="index" label="序号" width="55" />

          <el-table-column prop="name" label="名称"></el-table-column>

          <!-- 门店 -->
          <el-table-column prop="store.name" label="门店" width="120">
            <template #default="{ row }">
              <div v-if="row.store">
                {{ row.store.name }}
              </div>
            </template>
          </el-table-column>

          <!-- 负责人 -->
          <el-table-column prop="empOfManager.name" label="负责人" width="120">
            <template #default="{ row }">
              <div v-if="row.empOfManager">
                {{ row.empOfManager.name }}
              </div>
            </template>
          </el-table-column>

          <!-- 备注 -->
          <el-table-column prop="remark" label="备注" width="120">
            <template #default="{ row }">
              <div v-if="row.remark">
                {{ row.remark }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="gmtCreate" label="创建时间">
            <template #default="{ row }">
              {{ new Date(row.gmtCreate).toLocaleDateString() }}
            </template>
          </el-table-column>

          <el-table-column v-if="false" fixed="right" label="" width="120">
            <template #default="scope">
              <el-button type="primary" @click.prevent="toSelect(scope.row)">
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="position: relative; height: 30px">
          <el-pagination
            @current-change="pageChange"
            style="
              position: absolute;
              left: 50%;
              top: 10px;
              transform: translateX(-50%);
            "
            layout="prev, pager, next"
            :page-size="requestParam.pageSize"
            :current-page="requestParam.pageNumber"
            :total="bodyData.totalElements"
          />
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from "vue";
import $kt from "@/vueKantboot";
import { ElMessage, ElMessageBox } from "element-plus";

let dialogVisible = ref(false);

let open = () => {
  dialogVisible.value = true;
};

let dialogOfSave = ref();

let table = ref();

let toSave = (param: any) => {
  dialogOfSave.value.open(param);
};

let requestParam = ref({
  data: {
    name: "",
  },
  pageNumber: 1,
  pageSize: 30,
});

let isTop = ref(true);

let bodyData = ref({
  content: [
    {
      empIdOfManager: 477580912308229,
      empOfManager: {
        address: "",
        birthday: null,
        email: null,
        genderCode: null,
        gmtCreate: 1698733303916,
        gmtModified: 1698735623395,
        goodsStore: {
          address: "北京家园1号小区",
          area: 2.0,
          enableStatus: null,
          gmtCreate: 1698677071676,
          gmtModified: 1698718485343,
          gmtOpen: 1698595200000,
          id: 477350585077765,
          name: "一号店",
          phone: "4",
          typeCode: "join",
        },
        goodsStoreId: 477350585077765,
        id: 477580912308229,
        idCard: null,
        name: "12",
        phone: "额",
        userId: 477580901441541,
        username: "aaa",
      },
      gmtCreate: null,
      gmtModified: null,
      id: 1,
      name: "1号仓库",
      store: {
        address: "北京家园1号小区",
        area: 2.0,
        enableStatus: null,
        gmtCreate: 1698677071676,
        gmtModified: 1698718485343,
        gmtOpen: 1698595200000,
        id: 477350585077765,
        name: "一号店",
        phone: "4",
        typeCode: "join",
      },
      storeId: 477350585077765,
      remark: "备注",
    },
  ],
  totalElements: 0,
});

let selection = ref([]);

let emits = defineEmits(["select"]);

let selectionChange = (val: any) => {
  selection.value = val;
};

let toSelectSelection = () => {
  dialogVisible.value = false;
  emits("select", [...selection.value]);
};

let toSelect = (param: any) => {
  dialogVisible.value = false;
  emits("select", [param]);
};

defineExpose({
  open,
});

let toEdit = (param: any) => {
  dialogOfSave.value.open(param);
};

let pageChange = (val: any) => {
  requestParam.value.pageNumber = val;
  getBodyData();
};

let toAddChildren = (param: any) => {
  dialogOfSave.value.open({
    id: "",
    name: "",
    parentId: param.id,
    fileIdOfImg: "",
  });
};

let loading = ref(true);

let getBodyData = () => {
  loading.value = true;

  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsWarehouse/getBodyData",
      method: "post",
      data: requestParam.value,
    })
    .then((res) => {
      if (res.data.success) {
        bodyData.value = res.data.data;
      }
      loading.value = false;
    });
};

getBodyData();

let removeBatch = () => {
  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsWarehouse/removeBatch",
      method: "post",
      data: selection.value,
    })
    .then((res) => {
      if (res.data.success) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getBodyData();
        return false;
      }
      ElMessage({
        message: res.data.errMsg,
        type: "error",
      });
    });
};

let toRemoveBatch = () => {
  if (selection.value.length == 0) {
    ElMessage({
      message: "请选择要删除的数据",
      type: "error",
    });
    return false;
  }

  // 询问是否删除
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 删除
      removeBatch();
    })
    .catch(() => {
      // 取消
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px 20px 0 20px;
}

.box-box {
  background-color: #fff;
  color: #fff;
  text-align: center;
  padding: 30px;
  border-radius: 5px;
}

.box-box:hover {
  // 变小
  transform: scale(0.95);
}

.box-box:active {
  // 变小
  transform: scale(0.9);
}
</style>
